<template>
  <div>
    <div class="picture" v-for="(item,index) in options">
      <schart class="wrapper"
              v-if="item.datasets[0].data.length !==0"
              :canvasId="'canvas'+index" :options="item"/>
    </div>
    <div class="air">

    </div>
  </div>
</template>

<script>
import Schart from 'vue-schart';
export default {
  name: "userPicture",
  components:{
    Schart
  },
  data() {
    return {
      options:[
        {
          type: "bar",
          title: {
            text: "通知成功发送对比图"
          },
          bgColor: "#fbfbfb00",
          // labels: ["03月07日", "03月06日", "03月05日", "03月04日", "03月03日","03月02日","03月01日"],
          labels: [],
          datasets: [
            {
              label: "短信发送",
              fillColor: "rgba(241, 49, 74, 0.5)",
              // data: [300, 0, 150, 500, 200,300,80]
              data: []
            },
            {
              label: "邮箱",
              // data: [164, 178, 190, 135, 160,200,150]
              data: []
            },
          ],
        },
        {
          type: "line",
          title: {
            text: '最近几个天通知趋势图',
          },
          bgColor: '#fbfbfb00',
          // labels: ['6月', '7月', '8月', '9月', '10月'],
          labels: [],
          datasets: [{
            label: '短信',
            // data: [100, 278, 270, 190, 230]
            data: []
          }, {
            label: '邮箱',
            // data: [164, 178, 150, 135, 160]
            data: []
          }]
        },
        {
          type: 'pie',
          title: {
            text: '未通知日程对比饼状图'
          },
          legend: {
            position: 'left'
          },
          bgColor: '#fbfbfb00',
          labels: ['短信', '邮箱'],
          datasets: [{
            // data: [334, 278]
            data: []
          }]
        },
      ],

    }
  },
  methods:{
    //获取图1数据
    getPictureOne(){
      this.$axios({
        url: '/noteEmail/getPicture/'+this.$store.state.userContext.userid,
        method: 'GET',
      }).then( response =>{
        // console.log(response.data);
        let pictureOne = response.data.noteClass
        for(let index=0;index<pictureOne.length;index++){
          this.options[0].labels.push(pictureOne[index].dataLabel); //设置标题
          this.options[0].datasets[0].data.push(pictureOne[index].smsCount) //设置短信发送数量
          this.options[0].datasets[1].data.push(pictureOne[index].emailCount) //设置邮箱发送数量
        }
      }).catch( error =>{
        this.$message.error("请求超时...")
      })
    },

    //获取图1数据
    getPictureTwo(){
      this.$axios({
        url: '/noteEmail/getPicture/'+this.$store.state.userContext.userid,
        method: 'GET',
      }).then( response =>{
        // console.log(response.data);
        let pictureOne = response.data.noteClass
        for(let index=0;index<pictureOne.length;index++){
          this.options[1].labels.push(pictureOne[index].dataLabel); //设置标题
          this.options[1].datasets[0].data.push(pictureOne[index].smsCount) //设置短信发送数量
          this.options[1].datasets[1].data.push(pictureOne[index].emailCount) //设置邮箱发送数量
        }
      }).catch( error =>{
        this.$message.error("请求超时...")
      })
    },

    //获取图3数据
    getPictureThree(){
      this.$axios({
        url: '/userThings/getPictureThree/'+this.$store.state.userContext.userid,
        method: 'GET',
      }).then( response =>{
        // console.log(response.data);
        let pictureThree = response.data.noteClass
        this.options[2].datasets[0].data.push(pictureThree.smsCount) //设置短信发送数量
        this.options[2].datasets[0].data.push(pictureThree.emailCount) //设置邮箱发送数量
      }).catch( error =>{
        this.$message.error("请求超时...")
      })
    }
  },
  mounted() {
    this.getPictureOne();
    this.getPictureTwo();
    this.getPictureThree();
  }
}
</script>

<style scoped>
.picture {
  width: 45%;
  height: 410px;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 2%;
}
.wrapper{
  width: 100%;
  height: 100%;
  float: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 30px;
}
.air{
  width: 100%;
  height: 20px;
  float: left;
}
</style>
